<!doctype html>
<!--[if IE 7 ]>
<html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>.animate() | jQuery API Documentation</title>
    <meta name="author" content="JS Foundation - js.foundation">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="../../jquery-wp-content/themes/jquery.com/i/favicon.ico">
    <link rel="stylesheet" href="../../jquery-wp-content/themes/jquery/css/base.css?v=3">
    <link rel="stylesheet" href="../../jquery-wp-content/themes/api.jquery.com/style.css">
    <script src="../../jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="../../jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="../../jquery-wp-content/themes/jquery/js/main.js"></script>
    <script src="https://use.typekit.net/wde1aof.js"></script>
    <script>try {
        Typekit.load();
    } catch (e) {
    }</script>
    <!-- at the end of the HEAD -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
    <link rel="stylesheet" href="../../jquery-wp-content/themes/jquery/css/docsearch.css">
    <link rel='https://api.w.org/' href='//api.jquery.com/wp-json/'/>
    <meta name="generator" content="WordPress 4.5.2"/>
    <link rel="alternate" type="application/json+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fanimate%2F"/>
    <link rel="alternate" type="text/xml+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fanimate%2F&#038;format=xml"/>
</head>
<body class="api jquery single single-post postid-29 single-format-standard single-author singular">
<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="projects">
                    <li class="project jquery"><a href="../../jquery.com" title="jQuery">jQuery</a></li>
                    <li class="project jquery-ui"><a href="../../jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                    <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery
                        Mobile</a></li>
                    <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                    <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
                </ul>
                <ul class="links">
                    <li><a href="https://plugins.jquery.com/">插件</a></li>
                    <li class="dropdown"><a href="https://contribute.jquery.org/">贡献</a>
                        <ul>
                            <li><a href="https://js.foundation/CLA">CLA</a></li>
                            <li><a href="https://contribute.jquery.org/style-guide/">样式指导</a></li>
                            <li><a href="https://contribute.jquery.org/triage/">Bug修复</a></li>
                            <li><a href="https://contribute.jquery.org/code/">编码</a></li>
                            <li><a href="https://contribute.jquery.org/documentation/">文档</a></li>
                            <li><a href="https://contribute.jquery.org/web-sites/">网站</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/events">事件</a>
                        <ul class="wide">
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://jquery.org/support/">支持</a>
                        <ul>
                            <li><a href="https://learn.jquery.com/">学习中心</a></li>
                            <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
                            <li><a href="https://forum.jquery.com/">论坛</a></li>
                            <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                            <li><a href="https://jquery.org/support/">商业支持</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/">JS 基金会</a>
                        <ul>
                            <li><a href="https://js.foundation/about/join">加入</a></li>
                            <li><a href="https://js.foundation/about/members">成员</a></li>
                            <li><a href="https://js.foundation/about/leadership">领导</a></li>
                            <li><a href="https://js.foundation/community/code-of-conduct">组织</a></li>
                            <li><a href="https://js.foundation/about/donate">捐献</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>
<div id="container">
    <div id="logo-events" class="constrain clearfix">
        <h2 class="logo"><a href="../../jquery.com/" title="jQuery API Documentation">jQuery API 文档</a>
        </h2>
        <aside>
            <div id="broadcast">
                <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img
                        src="../../jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation"
                        alt="Support the JS Foundation" width="400" height="100"></a>
            </div>
        </aside>
    </div>
    <nav id="main" class="constrain clearfix">
        <div class="menu-top-container">
            <ul id="menu-top" class="menu">
                <li class="menu-item"><a href="../../jquery.com/download/">下载</a></li>
                <li class="menu-item current"><a href="../">API 文档</a></li>
                <li class="menu-item"><a href="../../blog.jquery.com/">博客</a></li>
                <li class="menu-item"><a href="../../plugins.jquery.com/">插件</a></li>
                <li class="menu-item"><a href="../../jquery.com/browser-support/">浏览器支持</a></li>
            </ul>
        </div>
        <form method="get" class="searchform" action="../">
            <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
            <label>
                <span class="visuallyhidden">Search jQuery API Documentation</span>
                <input type="text" name="s" value=""
                       placeholder="搜索">
            </label>
        </form>
    </nav>
    <div id="content-wrapper" class="clearfix row">
        <div class="content-right twelve columns">
            <div id="content">
                <article id="post-29"
                         class="post-29 post type-post status-publish format-standard hentry category-custom-effects category-65">
                    <header class="entry-header">
                        <h1 class="entry-title">.animate()</h1>
                        <hr>
                        <div class="entry-meta">
                            Categories: <span class="category"><a href="../category/effects/">Effects</a> &gt; <a
                                href="../category/effects/custom-effects/">Custom</a></span></div>
                        <!-- .entry-meta -->
                    </header><!-- .entry-header -->
                    <div class="entry-content">
                        <article id="animate1" class="entry method"><h2 class="section-title">
                            <span class="name">.animate( properties [, duration ] [, easing ] [, complete ] )</span><span
                                class="returns">返回：<a href="../Types/index.html#jQuery">jQuery</a></span>
                        </h2>
                            <div class="entry-wrapper">
                                <p class="desc"><strong>描述：</strong>执行一组CSS属性的自定义动画。</p>
                                <ul class="signatures">
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">新增版本：<a
                                                    href="../category/version/1.0/">1.0</a></span><a
                                                id="animate-properties-duration-easing-complete"
                                                href="#animate-properties-duration-easing-complete"><span
                                                class="icon-link"></span>.animate( properties [, duration ] [, easing ]
                                            [, complete ] )</a>
                                        </h4>
                                        <ul>
                                            <li id="animate-properties-duration-easing-complete-properties">
                                                <div><strong>properties</strong></div>
                                                <div>类型：<a href="../Types/index.html#PlainObject">PlainObject</a>
                                                </div>
                                                <div>动画将向其移动的CSS属性和值的对象。</div>
                                            </li>
                                            <li id="animate-properties-duration-easing-complete-duration">
                                                <div>
                                                    <strong>duration</strong> （默认值：<code>400</code>）
                                                </div>
                                                <div>类型：<a href="../Types/index.html#Number">Number</a> or <a
                                                        href="../Types/index.html#String">String</a>
                                                </div>
                                                <div>确定动画将运行多长时间的字符串或数字。</div>
                                            </li>
                                            <li id="animate-properties-duration-easing-complete-easing">
                                                <div>
                                                    <strong>easing</strong> （默认值：<code>swing</code>）
                                                </div>
                                                <div>类型：<a href="../Types/index.html#String">String</a>
                                                </div>
                                                <div>一个字符串，指示用于转换的缓冲函数。</div>
                                            </li>
                                            <li id="animate-properties-duration-easing-complete-complete">
                                                <div><strong>complete</strong></div>
                                                <div>类型：<a href="../Types/index.html#Function">Function</a>()</div>
                                                <div>动画完成后要调用的函数，每个匹配元素调用一次。</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">新增版本：<a
                                                    href="../category/version/1.0/">1.0</a></span><a
                                                id="animate-properties-options" href="#animate-properties-options"><span
                                                class="icon-link"></span>.animate( properties, options )</a>
                                        </h4>
                                        <ul>
                                            <li id="animate-properties-options-properties">
                                                <div><strong>properties</strong></div>
                                                <div>类型：<a href="../Types/index.html#PlainObject">PlainObject</a>
                                                </div>
                                                <div>动画将向其移动的CSS属性和值的对象。</div>
                                            </li>
                                            <li id="animate-properties-options-options">
                                                <div><strong>options</strong></div>
                                                <div>类型：<a href="../Types/index.html#PlainObject">PlainObject</a>
                                                </div>
                                                <div>要传递给方法的其他选项的映射。</div>
                                                <ul>
                                                    <li>
                                                        <div>
                                                            <strong>duration</strong> （默认值：<code>400</code>）
                                                        </div>
                                                        <div>类型：<a href="../Types/index.html#Number">Number</a> or <a
                                                                href="../Types/index.html#String">String</a>
                                                        </div>
                                                        <div>确定动画将运行多长时间的字符串或数字。</div>
                                                    </li>
                                                    <li>
                                                        <div>
                                                            <strong>easing</strong> （默认值：<code>swing</code>）
                                                        </div>
                                                        <div>类型：<a href="../Types/index.html#String">String</a>
                                                        </div>
                                                        <div>一个字符串，指示用于转换的缓冲函数。</div>
                                                    </li>
                                                    <li>
                                                        <div>
                                                            <strong>queue</strong> （默认值：<code>true</code>）
                                                        </div>
                                                        <div>类型：<a href="../Types/index.html#Boolean">Boolean</a> 或者
                                                            <a href="../Types/index.html#String">String</a>
                                                        </div>
                                                        <div>一个布尔值，指示是否将动画放置在效果队列中。如果为false，动画将立即开始。从<strong
                                                        >jQuery1.7</strong>开始，queue选项还可以接受字符串，在这种情况下，动画将添加到由该字符串表示的队列中。使用自定义队列名称时，动画不会自动启动；您必须调用<code
                                                        >.dequeue(&quot;queuename&quot;)</code>来启动它。
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div><strong>specialEasing</strong></div>
                                                        <div>类型：<a
                                                                href="../Types/index.html#PlainObject">PlainObject</a>
                                                        </div>
                                                        <div>包含一个或多个由属性参数及其对应函数定义的CSS属性的对象。<span
                                                                class="version-details">（新增版本：<a
                                                                href="../category/version/1.4/">1.4</a>）</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div><strong>step</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>(
                                                            <a href="../Types/index.html#Number">Number</a> now, <a
                                                                    href="../Types/index.html#Tween">Tween</a> tween )
                                                        </div>
                                                        <div>为每个动画元素的每个动画属性调用的函数。此函数提供了在设置属性之前修改Tween对象以更改属性值的机会。</div>
                                                    </li>
                                                    <li>
                                                        <div><strong>progress</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>(
                                                            <a href="../Types/index.html#Promise">Promise</a> animation,
                                                            <a href="../Types/index.html#Number">Number</a> progress, <a
                                                                    href="../Types/index.html#Number">Number</a>
                                                            remainingMs )
                                                        </div>
                                                        <div>在动画的每个步骤后调用的函数，无论动画属性的数量如何，每个动画元素仅调用一次。<span
                                                                class="version-details">（新增版本：<a
                                                                href="../category/version/1.8/">1.8</a>）</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div><strong>complete</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>()
                                                        </div>
                                                        <div>元素上的动画完成后调用的函数。</div>
                                                    </li>
                                                    <li>
                                                        <div><strong>start</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>(
                                                            <a href="../Types/index.html#Promise">Promise</a> animation
                                                            )
                                                        </div>
                                                        <div>当元素上的动画开始时要调用的函数。<span
                                                                class="version-details">（新增版本：<a
                                                                href="../category/version/1.8/">1.8</a>）</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div><strong>done</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>(
                                                            <a href="../Types/index.html#Promise">Promise</a> animation,
                                                            <a href="../Types/index.html#Boolean">Boolean</a>
                                                            jumpedToEnd )
                                                        </div>
                                                        <div>当元素上的动画完成（其Promise对象已解析）时要调用的函数。<span
                                                                class="version-details">（新增版本：<a
                                                                href="../category/version/1.8/">1.8</a>）</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div><strong>fail</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>(
                                                            <a href="../Types/index.html#Promise">Promise</a> animation,
                                                            <a href="../Types/index.html#Boolean">Boolean</a>
                                                            jumpedToEnd )
                                                        </div>
                                                        <div>当元素上的动画未能完成（其Promise对象被拒绝）时调用的函数。<span
                                                                class="version-details">（新增版本：<a
                                                                href="../category/version/1.8/">1.8</a>）</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div><strong>always</strong></div>
                                                        <div>类型：<a href="../Types/index.html#Function">Function</a>(
                                                            <a href="../Types/index.html#Promise">Promise</a> animation,
                                                            <a href="../Types/index.html#Boolean">Boolean</a>
                                                            jumpedToEnd )
                                                        </div>
                                                        <div>当元素上的动画完成或未完成而停止（其Promise对象已解析或被拒绝）时调用的函数。<span
                                                                class="version-details">（新增版本：<a
                                                                href="../category/version/1.8/">1.8</a>）</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="longdesc" id="entry-longdesc">
                                    <p>
                                        <code>.animate()</code>方法允许我们在任何数值CSS属性上创建动画效果。唯一需要的参数是CSS属性的普通对象。此对象与可以发送到<code>.css()</code>方法的对象类似，只是属性的范围更严格。
                                    </p>
                                    <h4 id="animation-properties">动画属性和值</h4>
                                    <p>
                                        所有已设置动画的属性都应设置为<em>单个数值</em>单个数值，以下说明除外；大多数非数字属性不能使用基本jQuery功能设置动画（例如，<code>width</code>、<code>height</code>或<code>left</code>可以设置动画，但<code>background-color</code>不能设置动画，除非使用<a
                                            href="https://github.com/jquery/jquery-color">jQuery.Color</a>插件）。除非另有规定，否则属性值将被视为像素数。在适用的情况下，可以指定单位<code>em</code>和<code>%</code>。
                                    </p>
                                    <p>除了样式属性外，还可以设置一些非样式属性（如<code>scrollTop</code>和<code>scrollLeft</code>）以及自定义属性的动画。
                                    </p>
                                    <p>
                                        不完全支持速记CSS属性（例如font、background、border）。例如，如果要设置渲染边框宽度的动画，至少必须事先设置边框样式和边框宽度，而不是“auto”。或者，如果要设置字体大小的动画，可以使用<code>fontSize</code>或CSS等效的<code>&apos;font-size&apos;</code>，而不是简单的<code>&apos;font&apos;</code>。
                                    </p>
                                    <p>
                                        除数值外，每个属性还可以采用字符串<code>&apos;show&apos;</code>、<code>&apos;hide&apos;</code>和<code>&apos;toggle&apos;</code>。这些快捷方式允许根据元素的显示类型自定义隐藏和显示动画。为了使用jQuery的内置切换状态跟踪，<code>&apos;toggle&apos;</code>关键字必须始终作为动画属性的值。
                                    </p>
                                    <p>动画特性也可以是相对的。如果为值提供了前导<code>+=</code>或<code>-=</code>字符序列，则通过从属性的当前值中增加或减去给定的数字来计算目标值。
                                    </p>
                                    <div class="warning">
                                        <p><strong>注意：</strong>与<code>.slideDown()</code>和<code>.fadeIn()</code>等快速动画方法不同，<code>.animate()</code>方法的效果<em>不</em>包含使隐藏元素可见。例如，执行<code>$(&nbsp;&quot;someElement&quot;&nbsp;).hide().animate({height:&nbsp;&quot;20px&quot;},&nbsp;500)</code>，动画会运行，但是<em>元素会保持隐藏</em>。
                                        </p>
                                    </div>
                                    <h4 id="duration">持续时间</h4>
                                    <p>持续时间以毫秒为单位；值越高表示动画速度越慢，而不是速度越快。默认持续时间为<code>400</code>毫秒。可以提供字符串<code>&apos;fast&apos;</code>和<code>&apos;slow&apos;</code>，分别表示<code>200</code>毫秒和<code>600</code>毫秒的持续时间。
                                    </p>
                                    <h4 id="callbacks">回调函数</h4>
                                    <p>
                                        如果提供此函数，则在<em>每个元素</em>的基础上调用<code>start</code>、<code>step</code>、<code>progress</code>、<code>complete</code>、<code>done</code>、<code>fail</code>和<code>always</code>回调；<code>this</code>指向正在设置动画的DOM元素。如果集合中没有元素，则不会调用回调。如果对多个元素设置了动画，则每个匹配的元素执行一次回调，而不是对整个动画执行一次回调。使用<code>.promise()</code>方法获取一个promise，您可以将对任何大小的动画集（包括空元素）触发一次的回调附加到该promise。
                                    </p>
                                    <h4 id="basic-usage">基本用法</h4>
                                    <p>要设置任何元素（例如简单图像）的动画，请执行以下操作：</p>
                                    <div class="syntaxhighlighter xml">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                    <div class="line n4">4</div>
                                                    <div class="line n5">5</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">div</span> <span
                                                            class="hljs-attr">id</span>=<span class="hljs-string">&quot;clickme&quot;</span>&gt;</span></code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>  Click here</code></div></div><div
                                                            class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">img</span> <span
                                                            class="hljs-attr">id</span>=<span class="hljs-string">&quot;book&quot;</span> <span
                                                            class="hljs-attr">src</span>=<span class="hljs-string">&quot;book.png&quot;</span> <span
                                                            class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span
                                                            class="hljs-attr">width</span>=<span class="hljs-string">&quot;100&quot;</span> <span
                                                            class="hljs-attr">height</span>=<span class="hljs-string">&quot;123&quot;</span></span></code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-attr">style</span>=<span class="hljs-string">&quot;position: relative; left: 10px;&quot;</span>&gt;</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>要同时设置图像的不透明度、左偏移和高度的动画，请执行以下操作：</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                    <div class="line n4">4</div>
                                                    <div class="line n5">5</div>
                                                    <div class="line n6">6</div>
                                                    <div class="line n7">7</div>
                                                    <div class="line n8">8</div>
                                                    <div class="line n9">9</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#clickme&quot;</span> ).click(<span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>  $( <span
                                                            class="hljs-string">&quot;#book&quot;</span> ).animate({</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">opacity</span>: <span class="hljs-number">0.25</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">left</span>: <span class="hljs-string">&quot;+=50&quot;</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">height</span>: <span class="hljs-string">&quot;toggle&quot;</span></code></div></div><div
                                                            class="container"><div class="line"><code>  }, <span
                                                            class="hljs-number">5000</span>, <span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-comment">// 动画完成。</span></code></div></div><div
                                                            class="container"><div class="line"><code>  });</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p class="image">
                                    <figure>
                                        <img src="resources/animate-1.jpg" alt>
                                        <figcaption>图 1 - 指定动画效果的图示</figcaption>
                                    </figure>
                                    </p>
                                    <p>请注意，<code>height</code>属性的目标值为<code>&apos;toggle&apos;</code>。由于图像以前是可见的，因此动画会将高度收缩为0以隐藏它。接着，第二次单击将反转此转换：
                                    </p>
                                    <p class="image">
                                    <figure>
                                        <img src="resources/animate-2.jpg" alt>
                                        <figcaption>图 2 - 指定动画效果的图示</figcaption>
                                    </figure>
                                    </p>
                                    <p>图像的<code>opacity</code>已达到其目标值，因此该属性不会在第二次单击时设置动画。由于<code>left</code>的目标值是相对值，因此在第二个动画中，图像会向右移动更远。
                                    </p>
                                    <p>
                                        如果元素的<code>position</code>样式属性是<code>static</code>（默认情况下是static），则方向属性（<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code>）对元素没有明显的影响。
                                    </p>
                                    <div class="warning">
                                        <p><strong>注意：</strong><a href="https://jqueryui.com/">jQuery UI</a>项目扩展了<code>.animate()</code>方法，允许对一些非数字样式（如颜色）设置动画。该项目还包括通过CSS类而不是单个属性指定动画的机制。
                                        </p>
                                    </div>
                                    <div class="warning">
                                        <p><strong>注意：</strong>如果试图为高度或宽度为0px的元素设置动画，元素的内容由于溢出而可见，jQuery可能会在动画期间剪辑此溢出。但是，通过固定隐藏的原始元素的尺寸，可以确保动画平稳运行。<a
                                                href="https://www.google.com/search?q=clearfix">clearfix</a>可用于自动修复主元素的尺寸，而无需手动设置。
                                        </p>
                                    </div>
                                    <h4 id="step">Step 函数</h4>
                                    <p><code>.animate()</code>的第二个版本提供了一个<code>step</code>选项&#x2014;即在动画的每个步骤中触发的回调函数。此函数对于启用自定义动画类型或在动画发生时更改动画非常有用。它接受两个参数（<code>now</code>和<code>fx</code>），<code>this</code>指向正在设置动画的DOM元素。
                                    </p>
                                    <ul>
                                        <li>
                                            <code>now</code>：在每个步骤中设置动画的特性的数值
                                        </li>
                                        <li>
                                            <code>fx</code>：对<code>jQuery.fx</code>prototype对象的引用，该对象包含许多属性，例如动画元素的<code>elem</code>、动画属性第一个值和最后一个值的<code>start</code>和<code>end</code>以及正在播放的动画的属性<code>prop</code>。
                                        </li>
                                    </ul>
                                    <p>请注意，对于每个动画元素上的每个动画属性，都会调用<code>step</code>函数。例如，给定两个列表项，<code>step</code>函数在动画的每个步骤触发四次：
                                    </p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                    <div class="line n4">4</div>
                                                    <div class="line n5">5</div>
                                                    <div class="line n6">6</div>
                                                    <div class="line n7">7</div>
                                                    <div class="line n8">8</div>
                                                    <div class="line n9">9</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;li&quot;</span> ).animate({</code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-attr">opacity</span>: <span class="hljs-number">.5</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-attr">height</span>: <span class="hljs-string">&quot;50%&quot;</span></code></div></div><div
                                                            class="container"><div class="line"><code>}, {</code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-attr">step</span>: <span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"> now, fx </span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-keyword">var</span> data = fx.elem.id + <span
                                                            class="hljs-string">&quot; &quot;</span> + fx.prop + <span
                                                            class="hljs-string">&quot;: &quot;</span> + now;</code></div></div><div
                                                            class="container"><div class="line"><code>    $( <span
                                                            class="hljs-string">&quot;body&quot;</span> ).append( <span
                                                            class="hljs-string">&quot;&lt;div&gt;&quot;</span> + data + <span
                                                            class="hljs-string">&quot;&lt;/div&gt;&quot;</span> );</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>  }</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <h4 id="easing">Easing</h4>
                                    <p><code>.animate()</code>的其余参数是一个字符串，用于命名要使用的函数。缓冲函数指定动画在动画中不同点的进展速度。jQuery库中唯一的实现是默认的，称为<code>swing</code>，以及一个以恒定速度进行的，称为<code>linear</code>的实现。插件的使用提供了更多的简化功能，最显著的是<a
                                            href="../../jqueryui.com/">jQueryUI套件</a>。</p>
                                    <h4 id="per-property-easing">Per-property Easing</h4>
                                    <p>从jQuery 1.4版开始，您可以在单个<code>.animate()</code>调用中设置每个属性的函数。在<code>.animate()</code>的第一个版本中，每个属性都可以将数组作为其值：数组的第一个成员是CSS属性，第二个成员是函数。如果未为特定属性定义每属性缓和函数，则它将使用<code>.animate()</code>方法的可选缓和参数的值。如果未定义缓和参数，则使用默认的<code>swing</code>函数。
                                    </p>
                                    <p>例如，要使用<code>swing</code>缓冲功能同时设置宽度和高度的动画，以及使用<code>linear</code>缓冲功能同时设置不透明度的动画，请执行以下操作：
                                    </p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                    <div class="line n4">4</div>
                                                    <div class="line n5">5</div>
                                                    <div class="line n6">6</div>
                                                    <div class="line n7">7</div>
                                                    <div class="line n8">8</div>
                                                    <div class="line n9">9</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#clickme&quot;</span> ).click(<span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>  $( <span
                                                            class="hljs-string">&quot;#book&quot;</span> ).animate({</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">width</span>: [ <span class="hljs-string">&quot;toggle&quot;</span>, <span
                                                            class="hljs-string">&quot;swing&quot;</span> ],</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">height</span>: [ <span
                                                            class="hljs-string">&quot;toggle&quot;</span>, <span
                                                            class="hljs-string">&quot;swing&quot;</span> ],</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">opacity</span>: <span class="hljs-string">&quot;toggle&quot;</span></code></div></div><div
                                                            class="container"><div class="line"><code>  }, <span
                                                            class="hljs-number">5000</span>, <span class="hljs-string">&quot;linear&quot;</span>, <span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>    $( <span
                                                            class="hljs-built_in">this</span> ).after( <span
                                                            class="hljs-string">&quot;&lt;div&gt;Animation complete.&lt;/div&gt;&quot;</span> );</code></div></div><div
                                                            class="container"><div class="line"><code>  });</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>在<code>.animate()</code>的第二个版本中，选项对象可以包括<code>specialEasing</code>属性，该属性本身是CSS属性及其相应函数的对象。例如，要使用<code>linear</code>缓冲功能同时设置宽度动画，使用<code>easeOutBounce</code>缓冲功能同时设置高度动画，请执行以下操作：
                                    </p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                    <div class="line n4">4</div>
                                                    <div class="line n5">5</div>
                                                    <div class="line n6">6</div>
                                                    <div class="line n7">7</div>
                                                    <div class="line n8">8</div>
                                                    <div class="line n9">9</div>
                                                    <div class="line n10">10</div>
                                                    <div class="line n11">11</div>
                                                    <div class="line n12">12</div>
                                                    <div class="line n13">13</div>
                                                    <div class="line n14">14</div>
                                                    <div class="line n15">15</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#clickme&quot;</span> ).click(<span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>  $( <span
                                                            class="hljs-string">&quot;#book&quot;</span> ).animate({</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">width</span>: <span class="hljs-string">&quot;toggle&quot;</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">height</span>: <span class="hljs-string">&quot;toggle&quot;</span></code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>  }, {</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">duration</span>: <span
                                                            class="hljs-number">5000</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">specialEasing</span>: {</code></div></div><div
                                                            class="container"><div class="line"><code>      <span
                                                            class="hljs-attr">width</span>: <span class="hljs-string">&quot;linear&quot;</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>      <span
                                                            class="hljs-attr">height</span>: <span class="hljs-string">&quot;easeOutBounce&quot;</span></code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>    },</code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-attr">complete</span>: <span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>      $( <span
                                                            class="hljs-built_in">this</span> ).after( <span
                                                            class="hljs-string">&quot;&lt;div&gt;Animation complete.&lt;/div&gt;&quot;</span> );</code></div></div><div
                                                            class="container"><div class="line"><code>    }</code></div></div><div
                                                            class="container"><div class="line"><code>  });</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>正如上文提到的，<code>easeOutBounce</code>功能需要一个插件。</p>
                                </div>
                                <h3>补充说明：</h3>
                                <div class="longdesc">
                                    <ul>
                                        <li>
                                            所有jQuery效果，包括<code>.animate()</code>，都可以通过设置<code>jQuery.fx.off&nbsp;=&nbsp;true</code>全局关闭，这将有效地将持续时间设置为0。有关详细信息，请参阅<a
                                                href="../jQuery.fx.off/">jQuery.fx.off</a>。
                                        </li>
                                    </ul>
                                </div>
                                <section class="entry-examples" id="entry-examples">
                                    <header><h2>示例：</h2></header>
                                    <div class="entry-example" id="example-0">
                                        <p>点击按钮使得div的多个属性播放动画。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                        <div class="line n35">35</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>animate demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">background-color</span>: <span
                                                                class="hljs-number">#bca</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">width</span>: <span
                                                                class="hljs-number">100px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">border</span>: <span
                                                                class="hljs-number">1px</span> solid green;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;go&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;raquo;</span> 运行<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">id</span>=<span class="hljs-string">&quot;block&quot;</span>&gt;</span>Hello!<span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-comment">// 在一个动画中使用多个单元类型。</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#go&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;#block&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">width</span>: <span
                                                                class="hljs-string">&quot;70%&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-number">0.4</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">marginLeft</span>: <span
                                                                class="hljs-string">&quot;0.6in&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">fontSize</span>: <span
                                                                class="hljs-string">&quot;3em&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">borderWidth</span>: <span
                                                                class="hljs-string">&quot;10px&quot;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  }, <span
                                                                class="hljs-number">1500</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-1">
                                        <p> 使用相对值设置div的left属性的动画。在按钮上单击几次以查看一系列的相关动画。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                        <div class="line n35">35</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>animate demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">position</span>: absolute;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">background-color</span>: <span
                                                                class="hljs-number">#abc</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">left</span>: <span
                                                                class="hljs-number">50px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">width</span>: <span
                                                                class="hljs-number">90px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">height</span>: <span
                                                                class="hljs-number">90px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">margin</span>: <span
                                                                class="hljs-number">5px</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;left&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;laquo;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;right&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;raquo;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#right&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;.block&quot;</span> ).animate({ <span
                                                                class="hljs-string">&quot;left&quot;</span>: <span
                                                                class="hljs-string">&quot;+=50px&quot;</span> }, <span
                                                                class="hljs-string">&quot;slow&quot;</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#left&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>)</span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;.block&quot;</span> ).animate({ <span
                                                                class="hljs-string">&quot;left&quot;</span>: <span
                                                                class="hljs-string">&quot;-=50px&quot;</span> }, <span
                                                                class="hljs-string">&quot;slow&quot;</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-2">
                                        <p>第一个按钮显示未排队动画的工作方式。<strong>当</strong>字体大小增加时，它将div向外扩展到90%的宽度。字体大小更改完成后，边框动画将开始。第二个按钮启动传统的链式动画，其中每个动画将在元素上的上一个动画完成后启动。
                                        </p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                        <div class="line n35">35</div>
                                                        <div class="line n36">36</div>
                                                        <div class="line n37">37</div>
                                                        <div class="line n38">38</div>
                                                        <div class="line n39">39</div>
                                                        <div class="line n40">40</div>
                                                        <div class="line n41">41</div>
                                                        <div class="line n42">42</div>
                                                        <div class="line n43">43</div>
                                                        <div class="line n44">44</div>
                                                        <div class="line n45">45</div>
                                                        <div class="line n46">46</div>
                                                        <div class="line n47">47</div>
                                                        <div class="line n48">48</div>
                                                        <div class="line n49">49</div>
                                                        <div class="line n50">50</div>
                                                        <div class="line n51">51</div>
                                                        <div class="line n52">52</div>
                                                        <div class="line n53">53</div>
                                                        <div class="line n54">54</div>
                                                        <div class="line n55">55</div>
                                                        <div class="line n56">56</div>
                                                        <div class="line n57">57</div>
                                                        <div class="line n58">58</div>
                                                        <div class="line n59">59</div>
                                                        <div class="line n60">60</div>
                                                        <div class="line n61">61</div>
                                                        <div class="line n62">62</div>
                                                        <div class="line n63">63</div>
                                                        <div class="line n64">64</div>
                                                        <div class="line n65">65</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>animate demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">background-color</span>: <span
                                                                class="hljs-number">#bca</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">width</span>: <span
                                                                class="hljs-number">200px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">height</span>: <span
                                                                class="hljs-number">1.1em</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">text-align</span>: center;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">border</span>: <span
                                                                class="hljs-number">2px</span> solid green;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">margin</span>: <span
                                                                class="hljs-number">3px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">font-size</span>: <span
                                                                class="hljs-number">14px</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">button</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">font-size</span>: <span
                                                                class="hljs-number">14px</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;go1&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;raquo;</span> 区域1动画<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;go2&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;raquo;</span> 区域2动画<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;go3&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;raquo;</span> 全部播放<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;go4&quot;</span>&gt;</span><span
                                                                class="hljs-symbol">&amp;raquo;</span> 重置<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">id</span>=<span class="hljs-string">&quot;block1&quot;</span>&gt;</span>区域1<span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">id</span>=<span class="hljs-string">&quot;block2&quot;</span>&gt;</span>区域2<span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#go1&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;#block1&quot;</span> )</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>    .animate({</code></div></div><div
                                                                class="container"><div class="line"><code>      <span
                                                                class="hljs-attr">width</span>: <span
                                                                class="hljs-string">&quot;90%&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>    }, {</code></div></div><div
                                                                class="container"><div class="line"><code>      <span
                                                                class="hljs-attr">queue</span>: <span
                                                                class="hljs-literal">false</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>      <span
                                                                class="hljs-attr">duration</span>: <span
                                                                class="hljs-number">3000</span></code></div></div><div
                                                                class="container"><div class="line"><code>    })</code></div></div><div
                                                                class="container"><div class="line"><code>    .animate({ <span
                                                                class="hljs-attr">fontSize</span>: <span
                                                                class="hljs-string">&quot;24px&quot;</span> }, <span
                                                                class="hljs-number">1500</span> )</code></div></div><div
                                                                class="container"><div class="line"><code>    .animate({ <span
                                                                class="hljs-attr">borderRightWidth</span>: <span
                                                                class="hljs-string">&quot;15px&quot;</span> }, <span
                                                                class="hljs-number">1500</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#go2&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;#block2&quot;</span> )</code></div></div><div
                                                                class="container"><div class="line"><code>    .animate({ <span
                                                                class="hljs-attr">width</span>: <span
                                                                class="hljs-string">&quot;90%&quot;</span> }, <span
                                                                class="hljs-number">1000</span> )</code></div></div><div
                                                                class="container"><div class="line"><code>    .animate({ <span
                                                                class="hljs-attr">fontSize</span>: <span
                                                                class="hljs-string">&quot;24px&quot;</span> }, <span
                                                                class="hljs-number">1000</span> )</code></div></div><div
                                                                class="container"><div class="line"><code>    .animate({ <span
                                                                class="hljs-attr">borderLeftWidth</span>: <span
                                                                class="hljs-string">&quot;15px&quot;</span> }, <span
                                                                class="hljs-number">1000</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#go3&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;#go1&quot;</span> ).add( <span
                                                                class="hljs-string">&quot;#go2&quot;</span> ).click();</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#go4&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;div&quot;</span> ).css({</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">width</span>: <span
                                                                class="hljs-string">&quot;&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">fontSize</span>: <span
                                                                class="hljs-string">&quot;&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">borderWidth</span>: <span
                                                                class="hljs-string">&quot;&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  });</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-3">
                                        <p>设置第一个div的left属性的动画，并同步其余div，使用step函数在动画的每个阶段设置其left属性。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                        <div class="line n35">35</div>
                                                        <div class="line n36">36</div>
                                                        <div class="line n37">37</div>
                                                        <div class="line n38">38</div>
                                                        <div class="line n39">39</div>
                                                        <div class="line n40">40</div>
                                                        <div class="line n41">41</div>
                                                        <div class="line n42">42</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>animate demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">position</span>: relative;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">background-color</span>: <span
                                                                class="hljs-number">#abc</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">width</span>: <span
                                                                class="hljs-number">40px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">height</span>: <span
                                                                class="hljs-number">40px</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">float</span>: left;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">margin</span>: <span
                                                                class="hljs-number">5px</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;go&quot;</span>&gt;</span>运行 &#xBB;<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">button</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span> <span
                                                                class="hljs-attr">class</span>=<span
                                                                class="hljs-string">&quot;block&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;#go&quot;</span> ).click(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  $( <span
                                                                class="hljs-string">&quot;.block&quot;</span> ).first().animate({</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">left</span>: <span
                                                                class="hljs-number">100</span></code></div></div><div
                                                                class="container"><div class="line"><code>  }, {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">duration</span>: <span
                                                                class="hljs-number">1000</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attr">step</span>: <span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"> now, fx </span>)</span>{</code></div></div><div
                                                                class="container"><div class="line"><code>      $( <span
                                                                class="hljs-string">&quot;.block&quot;</span> ).slice( <span
                                                                class="hljs-number">1</span> ).css( <span
                                                                class="hljs-string">&quot;left&quot;</span>, now );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>    }</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  });</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-4">
                                        <p>设置所有段落的动画为切换高度和不透明度，在600毫秒内完成动画。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">height</span>: <span
                                                                class="hljs-string">&quot;toggle&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-string">&quot;toggle&quot;</span></code></div></div><div
                                                                class="container"><div class="line"><code>}, <span
                                                                class="hljs-string">&quot;slow&quot;</span> );</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="entry-example" id="example-5">
                                        <p>将所有段落设置为left样式50，opacity为1（不透明，可见），在500毫秒内完成动画。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">left</span>: <span
                                                                class="hljs-number">50</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-number">1</span></code></div></div><div
                                                                class="container"><div class="line"><code>}, <span
                                                                class="hljs-number">500</span> );</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="entry-example" id="example-6">
                                        <p>设置所有段落的左侧和不透明度样式属性的动画；在队列<em>外</em>运行动画，使其自动启动，而无需等待轮到它。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">left</span>: <span
                                                                class="hljs-string">&quot;50px&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-number">1</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>}, {</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">duration</span>: <span
                                                                class="hljs-number">500</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">queue</span>: <span
                                                                class="hljs-literal">false</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="entry-example" id="example-7">
                                        <p>
                                            使用“easing”功能提供不同风格动画的示例。只有当你有一个插件提供了这个easing功能时，这才有效。注意，除非段落元素被隐藏，否则此代码将不起任何作用。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-string">&quot;show&quot;</span></code></div></div><div
                                                                class="container"><div class="line"><code>}, <span
                                                                class="hljs-string">&quot;slow&quot;</span>, <span
                                                                class="hljs-string">&quot;easein&quot;</span> );</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="entry-example" id="example-8">
                                        <p>设置所有段落的动画为切换高度和不透明度，在600毫秒内完成动画。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">height</span>: <span
                                                                class="hljs-string">&quot;toggle&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-string">&quot;toggle&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>}, {</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">duration</span>: <span
                                                                class="hljs-string">&quot;slow&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="entry-example" id="example-9">
                                        <p>使用easing功能提供不同风格的动画。只有当你有一个插件提供了这个放松功能时，这才有效。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-string">&quot;show&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>}, {</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">duration</span>: <span
                                                                class="hljs-string">&quot;slow&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">easing</span>: <span
                                                                class="hljs-string">&quot;easein&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="entry-example" id="example-10">
                                        <p>
                                            设置所有段落的动画，并在动画完成后执行回调函数。第一个参数是CSS属性的对象，第二个参数指定动画应该花费1000毫秒才能完成，第三个参数表示缓冲类型，第四个参数是匿名回调函数。</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).animate({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">height</span>: <span
                                                                class="hljs-number">200</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">width</span>: <span
                                                                class="hljs-number">400</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">opacity</span>: <span
                                                                class="hljs-number">0.5</span></code></div></div><div
                                                                class="container"><div class="line"><code>}, <span
                                                                class="hljs-number">1000</span>, <span
                                                                class="hljs-string">&quot;linear&quot;</span>, <span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  alert( <span
                                                                class="hljs-string">&quot;all done&quot;</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </article>
                    </div><!-- .entry-content -->                </article><!-- #post-29 -->
            </div>
            <div id="sidebar" class="widget-area" role="complementary">
                <aside id="categories" class="widget">
                    <ul>
                        <li class="cat-item cat-item-1"><a href="../category/ajax/">Ajax</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-2"><a
                                        href="../category/ajax/global-ajax-event-handlers/">Global Ajax
                                    Event Handlers</a>
                                </li>
                                <li class="cat-item cat-item-3"><a
                                        href="../category/ajax/helper-functions/">Helper Functions</a>
                                </li>
                                <li class="cat-item cat-item-4"><a
                                        href="../category/ajax/low-level-interface/">Low-Level
                                    Interface</a>
                                </li>
                                <li class="cat-item cat-item-5"><a
                                        href="../category/ajax/shorthand-methods/">Shorthand Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-6"><a href="../category/attributes/">Attributes</a>
                        </li>
                        <li class="cat-item cat-item-7"><a href="../category/callbacks-object/">Callbacks
                            Object</a>
                        </li>
                        <li class="cat-item cat-item-8"><a href="../category/core/">Core</a>
                        </li>
                        <li class="cat-item cat-item-9"><a href="../category/css/">CSS</a>
                        </li>
                        <li class="cat-item cat-item-10"><a href="../category/data/">Data</a>
                        </li>
                        <li class="cat-item cat-item-11"><a href="../category/deferred-object/">Deferred
                            Object</a>
                        </li>
                        <li class="cat-item cat-item-87"><a href="../category/deprecated/">Deprecated</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-90"><a
                                        href="../category/deprecated/deprecated-1.3/">Deprecated 1.3</a>
                                </li>
                                <li class="cat-item cat-item-88"><a
                                        href="../category/deprecated/deprecated-1.7/">Deprecated 1.7</a>
                                </li>
                                <li class="cat-item cat-item-89"><a
                                        href="../category/deprecated/deprecated-1.8/">Deprecated 1.8</a>
                                </li>
                                <li class="cat-item cat-item-94"><a
                                        href="../category/deprecated/deprecated-1.9/">Deprecated 1.9</a>
                                </li>
                                <li class="cat-item cat-item-93"><a
                                        href="../category/deprecated/deprecated-1.10/">Deprecated 1.10</a>
                                </li>
                                <li class="cat-item cat-item-98"><a
                                        href="../category/deprecated/deprecated-3.0/">Deprecated 3.0</a>
                                </li>
                                <li class="cat-item cat-item-101"><a
                                        href="../category/deprecated/deprecated-3.2/">Deprecated 3.2</a>
                                </li>
                                <li class="cat-item cat-item-99"><a
                                        href="../category/deprecated/deprecated-3.3/">Deprecated 3.3</a>
                                </li>
                                <li class="cat-item cat-item-100"><a
                                        href="../category/deprecated/deprecated-3.4/">Deprecated 3.4</a>
                                </li>
                                <li class="cat-item cat-item-102"><a
                                        href="../category/deprecated/deprecated-3.5/">Deprecated 3.5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-12"><a href="../category/dimensions/">Dimensions</a>
                        </li>
                        <li class="cat-item cat-item-13 current-cat-parent current-cat-ancestor"><a
                                href="../category/effects/">Effects</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-14"><a href="../category/effects/basics/">Basics</a>
                                </li>
                                <li class="cat-item cat-item-15 current-cat"><a
                                        href="../category/effects/custom-effects/">Custom</a>
                                </li>
                                <li class="cat-item cat-item-16"><a href="../category/effects/fading/">Fading</a>
                                </li>
                                <li class="cat-item cat-item-17"><a href="../category/effects/sliding/">Sliding</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-18"><a href="../category/events/">Events</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-19"><a
                                        href="../category/events/browser-events/">Browser Events</a>
                                </li>
                                <li class="cat-item cat-item-20"><a
                                        href="../category/events/document-loading/">Document Loading</a>
                                </li>
                                <li class="cat-item cat-item-21"><a
                                        href="../category/events/event-handler-attachment/">Event Handler
                                    Attachment</a>
                                </li>
                                <li class="cat-item cat-item-22"><a
                                        href="../category/events/event-object/">Event Object</a>
                                </li>
                                <li class="cat-item cat-item-23"><a
                                        href="../category/events/form-events/">Form Events</a>
                                </li>
                                <li class="cat-item cat-item-24"><a
                                        href="../category/events/keyboard-events/">Keyboard Events</a>
                                </li>
                                <li class="cat-item cat-item-25"><a
                                        href="../category/events/mouse-events/">Mouse Events</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-26"><a href="../category/forms/">Forms</a>
                        </li>
                        <li class="cat-item cat-item-27"><a href="../category/internals/">Internals</a>
                        </li>
                        <li class="cat-item cat-item-28"><a
                                href="../category/manipulation/">Manipulation</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-29"><a
                                        href="../category/manipulation/class-attribute/">Class
                                    Attribute</a>
                                </li>
                                <li class="cat-item cat-item-30"><a
                                        href="../category/manipulation/copying/">Copying</a>
                                </li>
                                <li class="cat-item cat-item-32"><a
                                        href="../category/manipulation/dom-insertion-around/">DOM
                                    Insertion, Around</a>
                                </li>
                                <li class="cat-item cat-item-33"><a
                                        href="../category/manipulation/dom-insertion-inside/">DOM
                                    Insertion, Inside</a>
                                </li>
                                <li class="cat-item cat-item-34"><a
                                        href="../category/manipulation/dom-insertion-outside/">DOM
                                    Insertion, Outside</a>
                                </li>
                                <li class="cat-item cat-item-35"><a
                                        href="../category/manipulation/dom-removal/">DOM Removal</a>
                                </li>
                                <li class="cat-item cat-item-36"><a
                                        href="../category/manipulation/dom-replacement/">DOM
                                    Replacement</a>
                                </li>
                                <li class="cat-item cat-item-37"><a
                                        href="../category/manipulation/general-attributes/">General
                                    Attributes</a>
                                </li>
                                <li class="cat-item cat-item-38"><a
                                        href="../category/manipulation/style-properties/">Style
                                    Properties</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-39"><a href="../category/miscellaneous/">Miscellaneous</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-40"><a
                                        href="../category/miscellaneous/collection-manipulation/">Collection
                                    Manipulation</a>
                                </li>
                                <li class="cat-item cat-item-41"><a
                                        href="../category/miscellaneous/data-storage/">Data Storage</a>
                                </li>
                                <li class="cat-item cat-item-42"><a
                                        href="../category/miscellaneous/dom-element-methods/">DOM Element
                                    Methods</a>
                                </li>
                                <li class="cat-item cat-item-43"><a
                                        href="../category/miscellaneous/setup-methods/">Setup Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-44"><a href="../category/offset/">Offset</a>
                        </li>
                        <li class="cat-item cat-item-45"><a href="../category/properties/">Properties</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-46"><a
                                        href="../category/properties/jquery-object-instance-properties/">Properties
                                    of jQuery Object Instances</a>
                                </li>
                                <li class="cat-item cat-item-47"><a
                                        href="../category/properties/global-jquery-object-properties/">Properties
                                    of the Global jQuery Object</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-92"><a href="../category/removed/">Removed</a>
                        </li>
                        <li class="cat-item cat-item-48"><a href="../category/selectors/">Selectors</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-49"><a
                                        href="../category/selectors/attribute-selectors/">Attribute</a>
                                </li>
                                <li class="cat-item cat-item-50"><a
                                        href="../category/selectors/basic-css-selectors/">Basic</a>
                                </li>
                                <li class="cat-item cat-item-51"><a
                                        href="../category/selectors/basic-filter-selectors/">Basic
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-52"><a
                                        href="../category/selectors/child-filter-selectors/">Child
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-53"><a
                                        href="../category/selectors/content-filter-selector/">Content
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-54"><a
                                        href="../category/selectors/form-selectors/">Form</a>
                                </li>
                                <li class="cat-item cat-item-55"><a
                                        href="../category/selectors/hierarchy-selectors/">Hierarchy</a>
                                </li>
                                <li class="cat-item cat-item-56"><a
                                        href="../category/selectors/jquery-selector-extensions/">jQuery
                                    Extensions</a>
                                </li>
                                <li class="cat-item cat-item-57"><a
                                        href="../category/selectors/visibility-filter-selectors/">Visibility
                                    Filter</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-58"><a href="../category/traversing/">Traversing</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-59"><a
                                        href="../category/traversing/filtering/">Filtering</a>
                                </li>
                                <li class="cat-item cat-item-60"><a
                                        href="../category/traversing/miscellaneous-traversal/">Miscellaneous
                                    Traversing</a>
                                </li>
                                <li class="cat-item cat-item-61"><a
                                        href="../category/traversing/tree-traversal/">Tree Traversal</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-63"><a href="../category/utilities/">Utilities</a>
                        </li>
                        <li class="cat-item cat-item-64"><a href="../category/version/">Version</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-65"><a href="../category/version/1.0/">Version
                                    1.0</a>
                                </li>
                                <li class="cat-item cat-item-66"><a href="../category/version/1.0.4/">Version
                                    1.0.4</a>
                                </li>
                                <li class="cat-item cat-item-67"><a href="../category/version/1.1/">Version
                                    1.1</a>
                                </li>
                                <li class="cat-item cat-item-68"><a href="../category/version/1.1.2/">Version
                                    1.1.2</a>
                                </li>
                                <li class="cat-item cat-item-69"><a href="../category/version/1.1.3/">Version
                                    1.1.3</a>
                                </li>
                                <li class="cat-item cat-item-70"><a href="../category/version/1.1.4/">Version
                                    1.1.4</a>
                                </li>
                                <li class="cat-item cat-item-71"><a href="../category/version/1.2/">Version
                                    1.2</a>
                                </li>
                                <li class="cat-item cat-item-72"><a href="../category/version/1.2.3/">Version
                                    1.2.3</a>
                                </li>
                                <li class="cat-item cat-item-73"><a href="../category/version/1.2.6/">Version
                                    1.2.6</a>
                                </li>
                                <li class="cat-item cat-item-74"><a href="../category/version/1.3/">Version
                                    1.3</a>
                                </li>
                                <li class="cat-item cat-item-75"><a href="../category/version/1.4/">Version
                                    1.4</a>
                                </li>
                                <li class="cat-item cat-item-76"><a href="../category/version/1.4.1/">Version
                                    1.4.1</a>
                                </li>
                                <li class="cat-item cat-item-77"><a href="../category/version/1.4.2/">Version
                                    1.4.2</a>
                                </li>
                                <li class="cat-item cat-item-78"><a href="../category/version/1.4.3/">Version
                                    1.4.3</a>
                                </li>
                                <li class="cat-item cat-item-79"><a href="../category/version/1.4.4/">Version
                                    1.4.4</a>
                                </li>
                                <li class="cat-item cat-item-80"><a href="../category/version/1.5/">Version
                                    1.5</a>
                                </li>
                                <li class="cat-item cat-item-81"><a href="../category/version/1.5.1/">Version
                                    1.5.1</a>
                                </li>
                                <li class="cat-item cat-item-82"><a href="../category/version/1.6/">Version
                                    1.6</a>
                                </li>
                                <li class="cat-item cat-item-83"><a href="../category/version/1.7/">Version
                                    1.7</a>
                                </li>
                                <li class="cat-item cat-item-84"><a href="../category/version/1.8/">Version
                                    1.8</a>
                                </li>
                                <li class="cat-item cat-item-86"><a href="../category/version/1.9/">Version
                                    1.9</a>
                                </li>
                                <li class="cat-item cat-item-103"><a
                                        href="../category/version/1.12-and-2.2/">Version 1.12 &amp;
                                    2.2</a>
                                </li>
                                <li class="cat-item cat-item-95"><a href="../category/version/3.0/">Version
                                    3.0</a>
                                </li>
                                <li class="cat-item cat-item-96"><a href="../category/version/3.1/">Version
                                    3.1</a>
                                </li>
                                <li class="cat-item cat-item-104"><a href="../category/version/3.2/">Version
                                    3.2</a>
                                </li>
                                <li class="cat-item cat-item-105"><a href="../category/version/3.3/">Version
                                    3.3</a>
                                </li>
                                <li class="cat-item cat-item-106"><a href="../category/version/3.4/">Version
                                    3.4</a>
                                </li>
                                <li class="cat-item cat-item-107"><a href="../category/version/3.5/">Version
                                    3.5</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
    </div>
</div>
<footer class="clearfix simple">
    <div class="constrain">
        <div class="row">
            <div class="six columns offset-by-three">
                <h3><span>Books</span></h3>
                <ul class="books">
                    <li>
                        <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg"
                                 alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92"
                                 height="114">
                            Learning jQuery Fourth Edition
                            <cite>Karl Swedberg and Jonathan Chaffer</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.manning.com/books/jquery-in-action-third-edition">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg"
                                 alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="150"
                                 height="188">
                            jQuery in Action
                            <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.syncfusion.com/ebooks/jquery">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg"
                                 alt="jQuery Succinctly by Cody Lindley" width="124" height="166">
                            jQuery Succinctly
                            <cite>Cody Lindley</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="legal">
            <ul class="footer-site-links">
                <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
                <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
                <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
                <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
                <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
                <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
            </ul>
            <p class="copyright">
                Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights
                reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a
                    href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For
                a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a
                    href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a
                    href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on
                the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are
                trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any
                affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms
                of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a
                    href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
                <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a
                        href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
            </p>
        </div>
    </div>
</footer>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
